<template>
  <div class="dashboard-container">
    <div class="main">
      <div class="item">
        <div class="title">访问量</div>
        <div class="content">
          <div class="header">
            <span class="num">35,400</span>
            <div>同日比12.5%，周同比5%</div>
          </div>
          <div class="footer">
            <div>总访问量</div>
            <div>30万</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">销售额</div>
        <div class="content">
          <div class="header">
            <span class="num">￥12,4000</span>
            <div class="msg">
              <el-progress :percentage="70" :stroke-width="15"  style="margin:0;padding:0"></el-progress>
            </div>
          </div>
          <div class="footer">
            <div>总销售额</div>
            <div>20万</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">订单量</div>
        <div class="content">
          <div class="header">
            <span class="num">35,400</span>
            <div>同日比12.5%，周同比5%</div>
          </div>
          <div class="footer">
            <div>总订单</div>
            <div>10万</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">用户</div>
        <div class="content">
          <div class="header">
            <span class="num">新增130</span>
            <div>同日比12.5%，周同比5%</div>
          </div>
          <div class="footer">
            <div>总用户</div>
            <div>15014</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  computed: {},
};
</script>

<style lang="scss" scoped>
.dashboard-container{
  background-color: #f5f7f9;
  padding: .5em;
margin: -.5em;
}
.main {
  display: flex;
  justify-content: space-between;
  
  .item {
    background-color: #ffffff;
    width: 24%;
    height: 200px;
    border-radius: 4px;
    .title {
      padding: 14px 16px;
      font-size: 20px;
      height: 51px;
    }
    .content {
      .header {
        border-top: 1px solid #e8eaec;
        border-bottom: 1px solid #e8eaec;
        .num {
          font-size: 30px;
          color: #515a6e;
          padding: 14px 16px;
        }
        span {
          display: inline-block;
          padding: 14px 16px;
        }
        div {
          padding: 14px 16px;
          height: 42px;
          padding-top: 8px;
          font-size: 14px;
          color: #515a6e;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          line-height: 30px;
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        height: 30px;
        padding: 14px 16px;
        height: 30px;
        -webkit-box-align: end;
        div {
          font-size: 14px;
          color: #515a6e;
        }
      }
    }
  }
}
</style>
